light mode
night mode
অ্যাজাক্স (Ajax)

Ajax Request এর সময় Error Management

Web Development - অ্যাজাক্স (Ajax) - Ajax এর মাধ্যমে Error Handling (Error Handling in Ajax) | NCTB BOOK
OPTIONS
Test Yorself
All Question
Edit Content
Add Video
Add MCQ
Add Written
Error Report

Ajax রিকোয়েস্টের সময় Error Management একটি গুরুত্বপূর্ণ অংশ, কারণ এটি ব্যবহারকারীদের জানাতে সাহায্য করে যে রিকোয়েস্ট সফল হয়েছে কি না বা কোনো সমস্যা হয়েছে কি না। Ajax রিকোয়েস্টের সময় বিভিন্ন কারণে ত্রুটি (error) ঘটতে পারে, যেমন সার্ভারের সমস্যা, নেটওয়ার্ক সমস্যা, ভুল URL, বা সার্ভার থেকে প্রত্যাশিত রেসপন্স না পাওয়া। নিচে Ajax রিকোয়েস্টের সময় Error Management কিভাবে করা যায় তার একটি উদাহরণসহ বিস্তারিত ব্যাখ্যা দেওয়া হলো।

Error Management করার পদ্ধতি:

১. HTTP Status Code ব্যবহার করে ত্রুটি সনাক্ত করা:

  • HTTP Status Code চেক করে ত্রুটি সনাক্ত করা যায়। যেমন, 200 মানে রিকোয়েস্ট সফল হয়েছে, কিন্তু যদি 404 হয়, তাহলে রিসোর্স পাওয়া যায়নি, আর 500 মানে সার্ভার এরর হয়েছে।

২. onreadystatechange ইভেন্টে ত্রুটি চেক করা:

  • readyState === 4 চেক করার পর, যদি status ২০০ না হয়, তাহলে একটি ত্রুটি মেসেজ দেখানো যায়।

৩. onerror ইভেন্ট হ্যান্ডলার ব্যবহার করা:

  • onerror ইভেন্ট হ্যান্ডলার ব্যবহার করে যদি কোনো নেটওয়ার্ক সমস্যা হয়, তা হ্যান্ডেল করা যায়।

উদাহরণ: Ajax Request এর সময় Error Management

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax Error Management Example</title>
</head>
<body>
    <h1>Ajax Request with Error Management</h1>
    <button onclick="fetchData()">Fetch Data</button>
    <div id="data-container">
        <!-- ডেটা বা ত্রুটি মেসেজ এখানে দেখানো হবে -->
    </div>

    <script src="app.js"></script>
</body>
</html>

JavaScript (app.js):

function fetchData() {
    // XMLHttpRequest অবজেক্ট তৈরি করা
    var xhr = new XMLHttpRequest();
    
    // GET রিকোয়েস্ট ওপেন করা
    xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/101", true);
    
    // রেসপন্স হ্যান্ডলিং সেট করা
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) { // রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা তা চেক করা
            if (xhr.status === 200) { // রিকোয়েস্ট সফল হলে
                var data = JSON.parse(xhr.responseText); // JSON ডেটা প্রসেস করা
                document.getElementById("data-container").innerHTML = `
                    <h2>${data.title}</h2>
                    <p>${data.body}</p>
                `;
            } else {
                // এরর হ্যান্ডলিং: HTTP স্ট্যাটাস চেক করা
                document.getElementById("data-container").innerHTML = `
                    Error fetching data! Status: ${xhr.status} - ${xhr.statusText}
                `;
            }
        }
    };
    
    // ত্রুটি হ্যান্ডলিংয়ের জন্য onerror ইভেন্ট হ্যান্ডলার সেট করা
    xhr.onerror = function() {
        document.getElementById("data-container").innerHTML = "Network error occurred!";
    };
    
    // রিকোয়েস্ট পাঠানো
    xhr.send();
}

ব্যাখ্যা:

১. XMLHttpRequest অবজেক্ট তৈরি করা:

  • fetchData() ফাংশনে একটি XMLHttpRequest অবজেক্ট তৈরি করা হয়েছে, যা Ajax রিকোয়েস্ট পরিচালনা করবে।

২. রিকোয়েস্ট ওপেন করা:

  • xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/101", true); মেথড ব্যবহার করে একটি GET রিকোয়েস্ট সেটআপ করা হয়েছে। (এখানে একটি ভুল ID দেওয়া হয়েছে, যা ইচ্ছাকৃতভাবে এরর তৈরি করতে ব্যবহার করা হয়েছে)

৩. onreadystatechange ইভেন্টে ত্রুটি হ্যান্ডলিং:

  • xhr.onreadystatechange ইভেন্টে চেক করা হয়েছে যে রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা (xhr.readyState === 4) এবং তারপর xhr.status চেক করা হয়েছে।
  • যদি xhr.status === 200 হয়, তাহলে ডেটা প্রসেস করা হয়েছে এবং HTML এ দেখানো হয়েছে।
  • যদি xhr.status !== 200 হয়, তাহলে একটি এরর মেসেজ দেখানো হয়েছে, যেখানে স্ট্যাটাস কোড এবং স্ট্যাটাস টেক্সট প্রদর্শিত হয়েছে।

৪. onerror ইভেন্ট হ্যান্ডলার:

  • যদি নেটওয়ার্কের কারণে কোনো সমস্যা হয় (যেমন ইন্টারনেট কানেকশন না থাকা), xhr.onerror ইভেন্ট হ্যান্ডলার সেই ত্রুটি হ্যান্ডেল করে এবং একটি এরর মেসেজ দেখায়।

Error Management এর জন্য সাধারণ HTTP Status Codes:

  • 200: OK (রিকোয়েস্ট সফল)
  • 404: Not Found (রিসোর্স পাওয়া যায়নি)
  • 500: Internal Server Error (সার্ভারে সমস্যা)

Error Management এর ধাপগুলো:

  1. HTTP Status Code চেক করা: xhr.status ব্যবহার করে সার্ভার থেকে প্রাপ্ত স্ট্যাটাস চেক করা।
  2. onreadystatechange ইভেন্টে ত্রুটি দেখানো: যদি status !== 200 হয়, তাহলে HTML ডিভে একটি এরর মেসেজ দেখানো।
  3. onerror ইভেন্ট হ্যান্ডলিং: নেটওয়ার্ক সমস্যা হ্যান্ডেল করা এবং উপযুক্ত মেসেজ দেখানো।

সারসংক্ষেপ:

  • Ajax রিকোয়েস্টের সময় Error Management করার জন্য onreadystatechange এবং onerror ইভেন্ট হ্যান্ডলার ব্যবহার করা হয়।
  • HTTP Status Code চেক করে রিকোয়েস্টের সফলতা বা ত্রুটি সনাক্ত করা যায়।
  • নেটওয়ার্ক বা সার্ভারের ত্রুটি হলে উপযুক্ত বার্তা দেখানো উচিত, যাতে ব্যবহারকারীরা বুঝতে পারে যে সমস্যা কোথায় হয়েছে।

এই উদাহরণটি অনুসরণ করে আপনি Ajax রিকোয়েস্টের সময় ত্রুটি সনাক্ত এবং হ্যান্ডেল করতে পারবেন, যা আপনার ওয়েব অ্যাপ্লিকেশনকে আরও ইউজার-ফ্রেন্ডলি এবং রেসপন্সিভ করে তুলবে।

আরও দেখুন...

Ajax Request এর সময় Error Management

or

Don't have an account? Register

Promotion